<template>
  <div class="_wz_educationExaminationDetails">
    <Card dis-hover :bordered="true" class="_wz_ztList_cont">
      <p slot="title">考试信息</p>
      <div class="_wz_ztList_cont_span">
        试卷名称：<span>{{!!formData ? formData.materialExamName : '--'}}</span>
        <Divider type="vertical" />
        考试方向：<span>{{!!formData ? formData.examPlanDirectionName : '--'}}</span>
        <Divider type="vertical" />
        试卷类型：<span>{{!!formData ? formData.materialExamTransportTypeName : '--'}}</span>
        <Divider type="vertical" />
        参加人数：<span>{{!!formData ? formData.examPlanFinishNumber : '--'}}/{{!!formData ? formData.examPlanNumber + '人' : '--'}}</span>
        <Divider type="vertical" />
        考题数量：<span>{{!!formData ? formData.examPlanAmount + '题' : '--'}}</span>
        <Divider type="vertical" />
        考题总分<span>：{{!!formData ? formData.examPlanTotalScore + '分' : '--'}}</span>
        <Divider type="vertical" />
        及格分数：<span>{{!!formData ? formData.examPlanPassScore + '分' : '--'}}</span>
        <Divider type="vertical" />
        考试时间：
        <span style="margin:0 5px 0 0;">{{!!formData ? formData.examPlanBeginDate : '--'}}</span>
        -
        <span style="margin:0 0 0 5px;">{{!!formData ? formData.examPlanEndDate : '--'}}</span>
      </div>
    </Card>


    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <p slot="title">参考人员</p>
      <wzTbale :tableData="tableData" ref="wzTbale"></wzTbale>
    </Card>

  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import wzTbale from "../../components/table/index.vue";
//reactive
export default defineComponent({
  name: 'personnelParameterDetails',//组件名称
  components: {
    wzTbale,
  },//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      formData: {},//培训数据
      tableData: {
        url: apiUrl.educateExamPlanExamStudentPlanList,//请求地址
        method: 'post',//请求方式
        where: {
          examPlanUuid:props.selectData.uuid,
        },//搜索条件
        height: '100%',//表格高度 auto
        page: false,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '从业人员', key: 'driverName', minWidth: 120,tooltip:true},
          {title: '人员头像',align: 'center', key: 'driverAvatar', minWidth: 120,tooltip:true,resizable: true,render: (h, params) => {
              // <Image :src="!!formData.trailerImg?apiUrl.imgUrl+formData.trailerImg:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.trailerImg?apiUrl.imgUrl+formData.trailerImg:'img/zwtpxd.png']" />

              if(!!params.row.driverAvatar){
                return h(resolveComponent('Image'), {width:'40px',height:'40px',src: apiUrl.imgUrl + params.row.driverAvatar,fit:'contain',preview:true,'preview-list':[apiUrl.imgUrl + params.row.driverAvatar]});
              }else{
                return h(resolveComponent('Avatar'), {shape: 'square',icon: 'ios-person',size: 'large'});
              }
            }
          },
          {title: '从业类型', key: 'driverTypeName', minWidth: 120,tooltip:true},
          {title: '驾乘车辆', key: 'driverVehicleNo', minWidth: 120,tooltip:true},
          {title: '联系电话', key: 'driverPhone', minWidth: 120,tooltip:true},
          {title: '考试状态', key: 'examStudentPass', minWidth: 140,tooltip:true,resizable: true,render: (h, params) => {
              if (params.row.examStudentPass == 0) {//未开始
                return h(resolveComponent('Tag'), { type: 'dot',color: 'blue'}, '未开始');
              }else  if (params.row.examStudentPass == 1) {//及格
                return h(resolveComponent('Tag'), { type: 'dot',color: 'green'}, '及格');
              }else {//不及格
                return h(resolveComponent('Tag'), { type: 'dot',color: 'red'}, '不及格');
              }
            }
          },
          {title: '提醒状态', key: 'reminderStatus', minWidth: 140,tooltip:true,resizable: true,render: (h, params) => {
              if (params.row.reminderStatus == 0) {//未提醒
                return h(resolveComponent('Tag'), { type: 'dot',color: 'warning'}, '未提醒');
              }else{//已提醒
                return h(resolveComponent('Tag'), { type: 'dot',color: 'green'}, '已提醒');
              }
            }
          },
          {title: '考试方向', key: 'examPlanDirectionName', minWidth: 120,tooltip:true},
          {title: '试卷得分', key: 'examStudentScore', minWidth: 120,tooltip:true,resizable: true,render: (h, params) => {
              return h('span', params.row.examStudentScore + ' 分')
            }
          },
          {title: '交卷时间', key: 'examStudentSubmitTime', minWidth: 180,tooltip:true},
        ],
        pagingParameters:{// 分页参数
          page:'pageNo',
          limit:'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },


    });


    //加载数据
    const loadData = ()=>{
      $axios.post(apiUrl.educateExamPlanExamPlanInfo,{uuid:props.selectData.uuid}).then((res) => {
        if (!!res) {
          state.formData = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })


    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
    }
  }
})


</script>
<style lang="less">

._wz_educationExaminationDetails {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);
  }
  ._wz_ztList_cont {
    ._wz_ztList_cont_span {
      line-height: 30px;
      color: #ababab;

      span {
        margin: 0 10px 0 0;
        color: #01AAED;
        word-break: break-all;
      }
    }
  }

}
</style>
